<template>
	<!-- 任务详情列表组件，兼容加载无限级分类递归调用 -->
	<view class="tree"> 
		<view class="tree-item" v-for="(item, index) in tree" :key="index">
			<view class="tree-item-title">{{ item.tltName }}<text
					v-if="item.planTemplateContentVOS">({{ map[item.tltParentId>0?item.tltParentId:item.tltId] ? map[item.tltParentId>0?item.tltParentId:item.tltId].length : 0 }}/{{ item.planTemplateContentVOS.length }})</text>
			</view>

			<view class="con-list" v-if="item.planTemplateContentVOS"
				:style="{ borderBottom: index != tree.length - 1 ? '2rpx solid #e9e9e9' : 'none' }">
				<conItem @setNode="setNodes" :pictureDisable="pictureDisable" :disabled="disabled" @finish="finishFuc" :planStatus="status" :isPlanStatus="isPlanStatus" :form="it" :planId="planId"
					:idx="idx" :tltId="item.tltParentId>0?item.tltParentId:item.tltId" v-for="(it, idx) in item.planTemplateContentVOS"
					:key="it.checkHistoryId"></conItem>
			</view>

			<templateTree @setNode="setNodes" :pictureDisable="pictureDisable" :planId="planId" :isPlanStatus="isPlanStatus" :status="status" :disabled="disabled"
				v-if="item.children && item.children.length > 0" :tree="item.children"></templateTree>
		</view>
	</view>
</template>

<script>
import conItem from './conItem.vue';
import templateTree from './templateTree.vue';

export default {
	name: 'templateTree',
	components: { conItem ,templateTree}, 
	data() {
		return {
			map: {}
		};
	},
	props: {
		pictureDisable:{
			type:[String,Number],
			default:0
		},
		planId: [String, Number],
		isPlanStatus: {
			type: Boolean,
			default: false,
		},
		status: [String, Number],
		tree: {
			type: Array,
			default: () => []
		},
		disabled: {
			type: Boolean,
			default: false,
		}
	},
	watch: {
		tree(val) { 
		},
		map(val) { 
		}
	},
	created() { 
	},
	methods: {
		setNodes(res) {
			this.$emit('setNode',res);
		},
		finishFuc(d) {
			let tid = d.tltId; 
			// 已完成工作项
			let map = JSON.parse(JSON.stringify(this.map));
			if (map[tid] && map[tid].length > 0) {
				const idx = this.map[tid].indexOf(d.id);
				if (d.finish) {
					if (idx == -1) {
						this.map[tid].push(d.id);
					}
				} else {
					if (idx != -1) {
						this.map[tid].splice(idx, 1);
					}
				} 
			} else {
				if (d.finish) {
					this.map[tid] = [d.id];
				}
			}

			let tid1 = 'suc' + d.tltId;
			// 正常
			if (map[tid1] && map[tid1].length > 0) {
				for (let i = 0; i < map[tid1].length; i++) {
					if (map[tid1][i] == d.id) {
						if (d.finish && d.userChoose == 0) {

						} else {
							this.map[tid1].splice(i, 1);
						}
						break;
					}
					if (map[tid1].length - 1 == i && map[tid1][i] != d.id) {
						if (d.finish && d.userChoose == 0) {
							this.map[tid1].push(d.id);
						}
					}
				}
			} else {
				if (d.finish) {
					this.map[tid1] = [d.id];
				}
			}

			// console.log(`[Sida] uni.emit: Type${this.planId}`);

			// #ifdef MP
			uni.$emit('Type' + this.planId, this.map);
			// #endif

			// #ifdef H5 
			setTimeout(() => {
				uni.$emit('Type' + this.planId, this.map);
			}, 600);
			// #endif

			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss" scoped>
.tree {
	width: 100%;
	-webkit-overflow-scrolling: touch;
	&-item {
		width: 100%;

		&-title {
			width: 90%;
			padding-left: 16rpx;
			margin: 5rpx 0;
			padding-top: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;

			text {
				color: #b8b8b8;
				font-weight: normal;
				font-size: 24rpx;
			}
		}
	}
}
</style>
